<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航条</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            body{
                height: 3000px;
            }
            /* 
                设置宽度和高度和nav的大小
            */
            .nav{
                width: 1210px;
                height: 48px;
                background-color: #ebe7e3;
                margin: 100px auto;
                /* 
                    粘滞定位
                        -当元素的position属性设置为sticky则开启了粘滞定位
                        -粘滞定位和相对定位的特点基本一致,不同的是粘滞定位可以在元素到达某个位置时将其固定
                */
               position: sticky;
                top: 10px;
            }
            /* 
                设置nav中的li
            */
            .nav li{
                float: left;
                /* 
                    设置li的高度
                */
                /* height: 48px; 设置li的高度 */
                /* 设置在父元素中垂直居中 */
                line-height: 48px;
            

                
            }
            .nav a{
                /* 
                    将a转化为块元素
                */
                display: block;
                /* 去除下划线 */
                text-decoration: none;
                color: #777777;
                font-size: 18px;

                padding: 0 42px;
            }
            .nav li:last-child a{
                padding: 0 45px 0 50px;
            }
            /* 设置鼠标移入的效果 */
            .nav a:hover{
                background-color: #3f3f3f;
                color: #e8b7e3;
            }

        </style>

</head>
<body>
        <!--创建导航条的结构  -->
        <ul class="nav">
            <li>
                <a href="#">html/css</a>
            </li>
            <li>
                <a href="#">browser side</a>
            </li>
            <li>
                <a href="#">sever side</a>
            </li>
            <li>
                <a href="#">programming</a>
            </li>
            <li>
                <a href="#">xml</a>
            </li>
            <li>
                <a href="#">web building</a>
            </li>
            <li>
                <a href="#">reference</a>
            </li>
        </ul>

</body>
</html>